<template>
  <div class="purchaseForm">
    <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
      <el-form :inline="true">
        <el-form-item>
          <el-button type="primary" @click="editSave">{{editState == 1?'编辑':'保存'}}</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="approval()">审批</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="distribute">分配</el-button>
        </el-form-item>
      </el-form>
    </el-col>
    <el-col :span="24" class="toolbar">
      <div class="apply-data">
        <div class="ad-item">
          <div class="tit">单据编号:</div>
          <div class="text">{{dataDetail.orderNum}}</div>
        </div>
        <div class="ad-item">
          <div class="tit">申请日期:</div>
          <div class="text">{{formatTime(dataDetail.uploadDay)}}</div>
        </div>
        <div class="ad-item">
          <div class="tit">公司部门:</div>
          <div class="text">{{dataDetail.unitname}}</div>
        </div>
        <div class="ad-item">
          <div class="tit">请购人:</div>
          <div class="text">{{dataDetail.psnname}}</div>
        </div>
        <div class="ad-item">
          <div class="tit">需求日期:</div>
          <div class="text">{{dataDetail.needDay}}</div>
        </div>
      </div>
    </el-col>
    <el-table :data="tableData" style="width: 100%" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" :selectable="isSelect"></el-table-column>
      <el-table-column label="序号" type="index"></el-table-column>
      <el-table-column prop="productName" label="产品名称"></el-table-column>
      <el-table-column prop="invspec" label="规格型号"></el-table-column>
      <el-table-column prop="inquiryCustname" label="供应商"></el-table-column>
      <!-- <el-table-column label="请购单数据" align="center" :label-class-name="'labelFont'"> -->
      <el-table-column prop="file" label="附件" width="140" align="center">
        <template slot-scope="scope">
          <div>
            <el-button @click="showImg(scope.row.inquiryProductUrl)" size="small" type="primary">查看</el-button>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="单价(元)" align="center" prop="inquiryUnitPrice" width="160px">
        <template slot-scope="scope">
          <el-input-number
            :disabled="editState == 1"
            :min="0"
            size="small"
            v-model="scope.row.inquiryUnitPrice"
          ></el-input-number>
        </template>
      </el-table-column>
      <el-table-column prop="measurement" label="单位"></el-table-column>
      <el-table-column label="本期申请数量" align="center" prop="requisitionsHowMany"></el-table-column>
      <el-table-column label="税率(元)" align="center" prop="requisitionsTaxRate" width="160px">
        <template slot-scope="scope">
          <el-input-number
            :disabled="editState == 1"
            :max="1"
            :min="0"
            size="small"
            v-model="scope.row.requisitionsTaxRate"
          ></el-input-number>
        </template>
      </el-table-column>
      <el-table-column label="总价" align="center" prop="inquiryAllMoneys" width="160px">
        <template slot-scope="scope">
          <el-input-number
            :disabled="editState == 1"
            size="small"
            :min="0"
            v-model="scope.row.inquiryAllMoneys"
          ></el-input-number>
        </template>
      </el-table-column>
      <el-table-column label="是否含运费" align="center">
        <template slot-scope="scope">
          <div>{{scope.row.requisitionsIsFreight == 'Y'?"是":"否"}}</div>
        </template>
      </el-table-column>
      <el-table-column label="付款方式" align="center" prop="inquiryPayType"></el-table-column>
      <el-table-column label="地址及联系方式" align="center" prop="inquiryAddressPhone"></el-table-column>
      <el-table-column label="用途" align="center" prop="requisitionsHowUse"></el-table-column>
      <el-table-column label="已购买提交时间" align="center" prop="submitTime"></el-table-column>
      <el-table-column label="备注" align="center" prop="inquiryRemark"></el-table-column>
      <!-- </el-table-column> -->
    </el-table>
    <el-col :span="24" class="toolbar">
      <div class="sign-remarks">
        <div class="tit">备注:{{dataDetail.remark}}</div>
      </div>
    </el-col>
    <el-col :span="24" class="toolbar">
      <div class="sign-data">
        <div class="sd-item">制单人:{{dataDetail.singlePerson}}</div>
        <div class="sd-item">审核人:{{dataDetail.auditor}}</div>
        <div class="sd-item">审核时间:{{formatTime(dataDetail.auditTime)}}</div>
        <div class="sd-item">变更人:{{dataDetail.modifiername}}</div>
        <div class="sd-item">变更日期:{{formatTime(dataDetail.modifytime)}}</div>
      </div>
    </el-col>
    <!-- 选择下个审批人弹窗 -->
    <el-dialog title="选择" :visible.sync="dialogInquire" width="500px" top="7vh">
      <el-form ref="form" :model="handleForm" label-width="160px">
        <el-form-item :label="btnState == '1'?'审批人：':'采购经理：'">
          <el-select filterable v-model="handleForm.cuserid" placeholder="请选择">
            <el-option
              v-for="item in userArr"
              :key="item.cuserid"
              :label="item.userName"
              :value="item.cuserid"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogInquire = false">取 消</el-button>
        <el-button type="primary" @click="clickInquire()">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 展示图片 -->
    <el-dialog title="附件" :visible.sync="dialogImgShow">
      <div class="showImgDiv">
        <img :src="showImgUrl" alt />
      </div>
    </el-dialog>
  </div>
</template>
<script>
import {
  wlcOrderDetail,
  wlcOrderAuditSubmit,
  WlcPurchaseAllowOrder,
  wlcOrderEdit,
} from "../../api/api";

import {
  smUserList,
  wlcPurchasingManagerFindIsAllowUpdate,
} from "../../api/baseSetting";
import moment from "moment";
export default {
  data() {
    return {
      tableData: [],
      page: {
        page: 1,
        pageSize: 10,
      },
      showImgUrl: "",
      dialogImgShow: false, //是否展示图片
      productList: [], //新增 询价单列表
      dataDetail: {}, //请购单详情
      // 部门申请的数据列表
      deparArr: [],
      //新增完后选择的请购单
      InquiryList: [],
      tableIndex: null, //点击第几个table
      selectInquiryArr: [], //选中的请购单
      inquiryData: {},
      totalData: {
        num: 0,
        price: 0,
      },
      tableAllID: "", //点击选择询价单  allId

      handleForm: {
        cuserid: "",
      },
      dialogInquire: false, //选择采购经理弹窗
      userArr: [], //采购经理列表
      tableSelect: [], //选中table
      btnState: 0, //1审批   2分配
      editState: 1, //1不可编辑  2可编辑

      canEdit: 0, //1不可编辑
    };
  },
  methods: {
    //是否可以编辑
    isCanEdit() {
      wlcPurchasingManagerFindIsAllowUpdate({}).then((res) => {
        this.canEdit = res;
      });
    },
    //编辑保存
    editSave() {
      if (this.canEdit == 1) {
        this.$message({
          message: "编辑权限暂未打开",
          type: "success",
        });
        return;
      }
      if (this.editState == 1) {
        this.editState = 2;
      } else {
        this.editState = 1;
        this.$confirm("确认保存?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }).then(() => {
          let param = Object.assign({}, this.dataDetail);
          param.wlcBankPurchasingOrders = this.tableData;
          wlcOrderEdit(param).then((res) => {
            this.$message({
              message: "保持成功",
              type: "success",
            });
          });
        });
      }
    },
    //table复选框是否能选择
    isSelect(e) {
      let state = true;
      if (e.hasDistribution == "Y") {
        state = false;
      }
      return state;
    },
    //table复选框
    handleSelectionChange(e) {
      this.tableSelect = e;
    },
    //点击分配
    distribute() {
      if (this.editState == 2) {
        this.$message({
          message: "请先保存",
          type: "warning",
        });
        return;
      }
      if (this.tableSelect.length > 0) {
        this.setBtnState(2);
      } else {
        this.$message({
          message: "请选择商品",
          type: "warning",
        });
      }
    },
    //点击审批
    approval() {
      if (this.editState == 2) {
        this.$message({
          message: "请先保存",
          type: "warning",
        });
        return;
      }
      if (this.$route.query.id) {
        this.setBtnState(1);
      } else {
        this.$message({
          message: "请先到列表页选择订单",
          type: "warning",
        });
      }
    },
    setBtnState(state) {
      this.btnState = state;
      this.dialogInquire = true;
    },
    //选择完询价单  点击确定
    clickInquire() {
      if (this.handleForm.cuserid) {
        if (this.btnState == 1) {
          let param = {
            id: this.$route.query.id,
            nextAuditorId: this.handleForm.cuserid,
          };
          wlcOrderAuditSubmit(param).then((res) => {
            this.$message({
              message: "成功",
              type: "success",
            });
            this.dialogInquire = false;
            this.getDetail();
          });
        }
        if (this.btnState == 2) {
          // let param = Object.assign({}, this.dataDetail, this.handleForm);
          let param = Object.assign({}, this.dataDetail);
          param.nextAuditorId = this.handleForm.cuserid;
          param.wlcBankPurchasingOrders = this.tableSelect;
          param.id = "";
          WlcPurchaseAllowOrder(param).then((res) => {
            this.dialogInquire = false;
            this.getDetail();
            this.$message({
              message: "成功",
              type: "success",
            });
          });
        }
      } else {
        this.$message({
          message: "请先选择采购经理",
          type: "warning",
        });
      }
    },
    //展示图片
    showImg(url) {
      if (url) {
        this.showImgUrl = url;
        this.dialogImgShow = true;
      } else {
        this.$message({
          message: "暂无图片",
          type: "warning",
        });
      }
    },
    //格式化时间
    formatTime(time) {
      if (time) {
        return moment(time).format("YYYY-MM-DD");
      } else {
        return "";
      }
    },
    //获取请购单详情
    getDetail() {
      if (this.$route.query.id) {
        let id = this.$route.query.id;
        wlcOrderDetail({ id }).then((res) => {
          this.dataDetail = res;
          this.tableData = res.wlcBankPurchasingOrders;
        });
      }
    },
    //获取采购经理列表
    getUser() {
      smUserList({
        page: {
          page: 1,
          pageSize: 100000,
        },
      }).then((res) => {
        this.userArr = res.records;
      });
    },
  },
  created() {
    this.getUser();
    this.isCanEdit();
    this.getDetail();
  },
};
</script>

<style lang="less" scoped>
.total-data {
  display: flex;
  justify-content: center;
  .total-item {
    font-weight: bold;
    font-size: 16px;
    color: #666;
    width: 20%;
  }
}
.apply-data {
  display: flex;
  flex-wrap: wrap;
  .ad-item {
    display: flex;
    height: 30px;
    line-height: 30px;
    margin-right: 70px;
    color: #666;
    font-size: 14px;
  }
}
.sign-remarks {
  width: 100%;
  border-bottom: 1px solid #999;
  font-size: 14px;
  height: 40px;
  line-height: 40px;
  color: #333;
}
.sign-data {
  display: flex;
  .sd-item {
    flex: 1;
    color: #333;
  }
}
.inquiryTit {
  font-weight: bold;
  font-size: 16px;
  margin-bottom: 10px;
}
.inquiry-list {
  img {
    max-width: 75px;
    max-height: 75px;
  }
}
.el-icon-circle-check {
  font-size: 20px;
  color: #409eff;
}
.inquire-table {
  margin-top: 20px;
  .it-tit {
    color: #666;
    font-weight: bold;
    margin-bottom: 10px;
  }
}
.showImgDiv {
  width: 100%;
  img {
    width: 100%;
  }
}
</style>
<style lang="less">
.el-table th > .cell.labelFont {
  font-weight: bold;
  color: #333 !important;
}
</style>
